<template>
  <div class>
    <dxIntro></dxIntro>
    <section id="intro-demo" class="work1Wrap">
      <b-container>
        <b-row>
          <b-col md="12" class="section-header mb-5">
            <h2 class="font-weight-bold mb-3">Ten Amazing Demos</h2>
            <p
              class="ng-tns-c2-0"
            >All Sections are individual Components So You can use whatever You want .</p>
          </b-col>

          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/1.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version One</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv1" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>

          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/2.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Two</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv2" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/3.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Three</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv3" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/4.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Four</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv4" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/5.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Five</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv5" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/6.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Six</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv6" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/7.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Seven</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv7" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/8.png"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Eight</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv8" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/9.png"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Nine</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv9" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/10.jpg"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Ten</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv10" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
          <b-col md="6 mb-4">
            <b-card no-body class="o-hidden">
              <a>
                <img
                  class="card-img-top"
                  alt="Card image cap"
                  src="@/assets/images/landing/demos/11.png"
                />
              </a>
              <b-card-body class="text-center">
                <h5 class="card-title font-weight-bold m-0">Version Eleven</h5>
              </b-card-body>
              <b-card-footer class="text-center">
                <b-button target="_blank" to="/landingv11" variant="primary" class="half-button">View Demo</b-button>
              </b-card-footer>
            </b-card>
          </b-col>
        </b-row>
      </b-container>
    </section>

    <section class="features_wrap p-t-b-80">
      <b-container>
        <b-row>
          <b-col md="12" class="section-header mb-5">
            <h2 class="font-weight-bold">Some Features Of Dexam</h2>
          </b-col>

          <b-col md="4" class="mb-4">
            <b-card class="text-center p-5">
              <h4 class="card-title pt-2 font-weight-medium">Vue CLI</h4>
            </b-card>
          </b-col>

          <b-col md="4" class="mb-4">
            <b-card class="text-center p-5">
              <h4 class="card-title pt-2 font-weight-medium">Responsive</h4>
            </b-card>
          </b-col>

          <b-col md="4" class="mb-4">
            <b-card class="text-center p-5">
              <h4 class="card-title pt-2 font-weight-medium">Major Browser Support</h4>
            </b-card>
          </b-col>

          <b-col md="4" class="mb-4">
            <b-card class="text-center p-5">
              <h4 class="card-title pt-2 font-weight-medium">Bootstrap Carousel</h4>
            </b-card>
          </b-col>

          <b-col md="4" class="mb-4">
            <b-card class="text-center p-5">
              <h4 class="card-title pt-2 font-weight-medium">Bootstrap Vue</h4>
            </b-card>
          </b-col>

          <b-col md="4" class="mb-4">
            <b-card class="text-center p-5">
              <h4 class="card-title pt-2 font-weight-medium">Easy to Customize</h4>
            </b-card>
          </b-col>

          <b-col md="12" class="mt-4 text-center">
            <div class="demo-intro-Buttons">
                <b-button href="#intro-demo" v-smooth-scroll size="lg" variant="warning" class="half-button text-uppercase pl-5 pr-5 pb-2 mr-2 mb-4">
                    View Demos
                </b-button>
                <b-button size="lg" variant="success" class="half-button text-uppercase pl-5 pr-5 pb-2 mr-2 mb-4">
                    Buy Dexam 
                </b-button>
            </div>

          </b-col>
        </b-row>
      </b-container>
    </section>
  </div>
</template>
<script>
import intro from '@/components/intros/introDemo';

export default {
  metaInfo: {
    bodyAttrs: {
      class: ['landing-gradient-purple-indigo'],
    },
  },
  components: {
    dxIntro: intro,
  },
};
</script>
